<template>
	<view class="container">
		<view class="wrap">
			<view class="form-wrap">
				<view class="form-item">
					<label>充值贡献值</label>
					<input type="text" placeholder="请输入贡献值" v-model="rechargeValue" placeholder-style="font-size:28rpx"/>
				</view>
				<view class="form-item">
					<label>支付方式</label>
					<text>线下支付</text>
				</view>
			</view>
			<view class="account-wrap">
				<view class="title line-v-center">收款账户</view>
				<view class="account-con">
					<view class="account-item line-v-center">
						<label>户名</label>
						<text>{{account.company_name}}</text>
					</view>
					<view class="account-item line-v-center">
						<label>银行账户</label>
						<text>{{account.bank_no}}</text>
						<view class="copy" @tap='copy(account.bank_no)'>复制</view>
					</view>
					<view class="account-item line-v-center">
						<label>开户银行</label>
						<text>{{account.bankName}}</text>
					</view>
					<!-- <view class="account-item line-v-center">
						<label>行号</label>
						<text>{{account.bank_line_number}}</text>
					</view> -->
				</view>
			</view>
			<button class="btn line-center" :disabled="isDisabled" :loading="isDisabled" @tap='toRecharge'>立即充值</button>
			<view class="xieyi-wrap line-center" @tap='toCheck'>
				<uni-icons type="circle" size="20" v-if='!isCheck'></uni-icons>
				<uni-icons type="checkbox-filled" size="20" color="#0e0e0e" v-else></uni-icons>
				<view class="xieyi-con line-center">
					我已阅读并同意<text  @tap.stop='toAgree(4)'>《充值协议》</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				rechargeValue:'',
				isCheck:false,
				account:{},
				isDisabled:false
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			getInfo(){
				app.globalRequest({
					api:app.getApi().recharge.accountSetting
				}).then(res=>{
					if(res.code == 0){
						this.account = res.data.bankInfo
					}
				})
			},
			toCheck(){
				this.isCheck = !this.isCheck;
			},
			toRecharge(){
				if(!this.rechargeValue){
					uni.showToast({
						title:'请输入贡献值',
						icon:'none'
					})
					return;
				}
				if(!this.isCheck){
					uni.showToast({
						title:'请已阅读并同意《服务协议》',
						icon:'none'
					})
					return;
				}
				this.isDisabled = true;
				app.globalRequest({
					api:app.getApi().recharge.createRechargeOrder,
					method:"POST",
					data:{
						recharge_value:this.rechargeValue
					}
				}).then(res=>{
					if(res.code == 0){
						this.isDisabled = false;
						uni.navigateTo({
							url:`/pages/result/result?num=${res.money}&id=${res.recharge_id}&status=0`
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.isDisabled = false;
					}
				})
			},
			copy(text){
				uni.setClipboardData({
				    data: text, // e是你要保存的内容
				    success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
				    }
				})
			},
			toAgree(type) {
				uni.navigateTo({
					url: `/pages/agreement-detail/agreement-detail?type=${type}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F7FB;
	}
	.wrap{
		padding-top:30rpx;
	}
	.form-wrap{
		margin:0 24rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-top:34rpx;
		.form-item{
			padding-bottom: 26rpx;
			border-bottom: 2rpx solid #F5F7F9;
			margin:0 24rpx;
			display: flex;
			justify-content: space-between;
			&:first-of-type{
				flex-direction: column;
				input{
					margin-top:32rpx;
					font-size: 28rpx;
				}
				
			}
			&:last-of-type{
				border-bottom: 0;
				margin-top:56rpx;
			}
		}
	}
	.account-wrap{
		margin:24rpx 24rpx;
		border-radius: 8rpx;
		overflow: hidden;
		background: #fff;
		.title{
			height: 88rpx;
			background: linear-gradient( 93deg, #E9E9E9 0%, #FFFFFF 100%);
			padding:0 24rpx;
			font-weight: bold;
		}
		.account-con{
			margin:0 24rpx;
			.account-item{
				height: 100rpx;
				border-bottom: 2rpx solid #F5F7F9;
				font-weight: bold;
				label{
					width: 112rpx;
					margin-right: 30rpx;
				}
				text{
					flex:1;
				}
			}
		}
	}
	.btn{
		width: 654rpx;
		height: 84rpx;
		background: #1C1C1C;
		border-radius: 42rpx;
		margin:112rpx auto 0;
		color:#fff;
		font-size: 32rpx;
	}
	.xieyi-wrap{
		font-size: 24rpx;
		margin-top:24rpx;
		.xieyi-con{
			margin-left: 8rpx;
		}
		text{
			color:#5B7DF7;
		}
	}

</style>
